<template>
	<view class="home">
			<CustomNavbar></CustomNavbar>
			<scroll-view scroll-y @scrolltolower="toButtom" refresher-enabled :refresher-triggered="isTrigger" @refresherrefresh="refresh">
					<AdsSwiper :dataList="bannerList" class="banner"></AdsSwiper>
					<categoryPannel :dataList="CategoryList"></categoryPannel>
					<HotPanel :dataList="hotList"></HotPanel>
					<favor ref="favorInfo"></favor>
			</scroll-view>
	</view>
</template>

<script>
	import CustomNavbar from '@/pages/index/components/CustomNavbar.vue'
	import AdsSwiper from '@/pages/index/components/AdsSwiper.vue'
	import categoryPannel from '@/pages/index/components/categoryPannel.vue'
	import HotPanel from '@/pages/index/components/HotPanel.vue'
	import favor from '@/pages/index/components/favor.vue'
	export default {
		data() {
			return {
				bannerList: [],
				CategoryList: [],
				hotList: [],
				isTrigger: false
			}
		},
		onLoad() {
			this.getBannerData()
			this.getCategoryData()
			this.getHotData()
		},
		methods: {
        async getBannerData(){
				const res = await this.$http({
					url:'/home/banner',
					data:{
						distributionSite: 1
					}
				})
				console.log(res)
				this.bannerList = res.data.result
			},
			async getCategoryData(){
				const res = await this.$http({
					url: '/home/category/mutli'
				})
				console.log(res.data)
				this.CategoryList = res.data.result
			},
			async getHotData(){
				const res = await this.$http({
					url: '/home/hot/mutli'
				})
				console.log(res.data)
				this.hotList = res.data.result
			},
			toButtom(){
				this.$refs.favorInfo.getFavorData()
			},
			async refresh(){
				this.isTrigger = true
				this.$refs.favorInfo.reset()
				await Promise.all([this.getBannerData(), this.getCategoryData(), this.getHotData(), this.$refs.favorInfo.getFavorData()])
				this.isTrigger = false
			}
		},
		components:{
			CustomNavbar,
			AdsSwiper,
			categoryPannel,
			HotPanel,
			favor
		}
	}
</script>

<style lang="scss">
	page{
		 height: 100%;
		.home{
			height: 100%;
			display: flex;
			flex-direction: column;
			scroll-view{
				flex: 1;
				overflow: hidden;
				.banner{
					height: 280rpx;
				}
			}
		}
	}
</style>
